<template>
  <el-form
    :model="form"
    :ref="refName"
    label-width="100px"
    label-position="top"
  >
    <formItem
      v-for="(item, index) in formList"
      :key="index"
      :item="item"
      :itemIndex='index'
      :form="form"
      :formList="formList"
      :model="model"
      @deleteItem="deleteItem"
      @setHoverShow='setHoverShow'
    >
      <!-- <slot name="deleteBtn">
        
      </slot> -->
    </formItem>
    <div class="tc mt20">
      <el-button @click="cancel" v-if="showCancelBtn">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm(refName)"
        v-if="showConfirmBtn"
        >提交</el-button
      >
    </div>
  </el-form>
</template>

<script>
import formItem from "./formItem";
export default {
  components: {
    formItem,
  },
  data() {
    return {};
  },
  created() {},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
        } else {
          this.$emit("fail", this.form);
        }
      });
    },
    cancel() {
      this.$emit("cancal");
    },
    deleteItem (item) {
      this.$emit('deleteItem',item)
    },
    setHoverShow (data) {
      this.$emit('setHoverShow', data)
    }

  },
  props: {
    formList: {
      type: Array,
      default: () => [],
    },
    refName: {
      type: String,
      // default: "form",
    },
    form: {
      type: Object,
    },
    showConfirmBtn: {
      type: Boolean,
      default: true,
    },
    showCancelBtn: {
      type: Boolean,
      default: true,
    },
    model: {
      type: String,
      default: "submit", // 问卷调查表单模式  默认是提交模式一般用与前台提交文件  edit 编辑模式用与后台编辑form表单 readOnly 只读模式
    },
  },
};
</script>

<style>
</style>